<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
    </title>
    <!-- 1. 只保留 Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'bootstrap5/css/bootstrap.min.css' %}">
    <!-- 自定义 CSS -->
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    {% block head %}
    {% endblock %}
</head>
<body>
<header class="p-3 text-bg-light border-bottom mb-3">
    <div class="container">
        <!-- 2. 修复导航栏布局 -->
        <div class="d-flex flex-wrap align-items-center justify-content-between">
            <!-- 左侧 Logo -->
            <a href="{% url 'bootstrapApp:blog_myself' user_id=user.id%}" class="d-flex align-items-center text-decoration-none">
                <img src="{% static 'image/cat.png' %}" alt="Logo" height="50">
            </a>

            <!-- 中间导航链接 -->
            <ul class="nav mb-2 mb-lg-0">
                <li class="nav-item">
                    <!-- 跳转首页 -->
                    <a href="{% url 'bootstrapApp:index' %}" class="nav-link px-2 text-primary">首页</a>
                </li>
                <li class="nav-item">
                    <!-- 跳转发布页面 需要传参 -->
                    <a href="{% url 'bootstrapApp:blog_pub' %}" class="nav-link px-2 text-primary">发布博客</a>
                </li>

            </ul>

            <!-- 右侧搜索框和用户菜单 -->
            <div class="d-flex align-items-center">
                <!-- 搜索框 -->
                <form class="me-3" role="search" action="{% url 'bootstrapApp:search' %}" method="get">
                    <input type="search" class="form-control" placeholder="搜索..." name="q">
                </form>

                <!-- 下拉菜单（修复后的代码） -->
                {% if user.is_authenticated %}
                    <div class="dropdown">
                        <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle"
                           data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="{% static 'image/cat.png' %}" alt="用户头像" width="32" height="32"
                                 class="rounded-circle">
                        </a>
                        <!-- 添加 dropdown-menu-end 让菜单右侧对齐 -->
                        <ul class="dropdown-menu dropdown-menu-end">
                            <!-- 我的 -->
                            <li><a class="dropdown-item" href="{% url 'bootstrapApp:blog_myself' user_id=user.id%}">我的</a></li>
                            <!-- 设置信息 -->
                            <li><a class="dropdown-item" href="{% url 'bootstrapApp:blog_informationChange' user_id=user.id%}">设置信息</a></li>
                            <!-- 登录其他账号 -->
                            <li><a class="dropdown-item" href="{% url 'bootstrapApp:blog_login' %}">登录其他账号</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="{% url 'bootstrapApp:blog_logout' %}">退出登录</a></li>
                        </ul>
                    </div>
                {% else %}
                    <div class="text-end">
                    <!-- 登录页面 -->
                        <a href="{% url 'bootstrapApp:blog_login' %}" type="button"
                           class="btn btn-outline-primary me-2">登录</a>
                        <a href="{% url 'bootstrapApp:blog_register' %}" type="button" class="btn btn-warning">注册</a>
                    </div>
                {% endif %}

            </div>
        </div>
    </div>
</header>

<main class="container bg-white p-3 rounded">
    {% block main %}
    {% endblock %}
</main>

<!-- 3. 将 Bootstrap JS 放在 body 末尾（关键修复！） -->
<script src="{% static 'bootstrap5/js/bootstrap.bundle.min.js' %}"></script>

</body>
</html>